@import './variables.less';

html {
  min-height: 100%;
  min-width: 100%;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  font-size: 16px;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC,
    Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial,
    sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  font-variant: tabular-nums;
  margin: 0;
  padding: 0;
  overflow: auto;
  color: white;
}

body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

a {
  text-decoration: none;
  color: inherit !important;
}

ul,
li {
  list-style-type: none;
}
img {
  width: auto;
  max-width: 100%;
}

.substance__wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  background-repeat: repeat;
  background: radial-gradient(
    circle closest-corner at top,
    var(--bit-dark-blue),
    var(--dark-blue)
  );
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.substance__wrapper::after {
  --start-color: rgba(127, 127, 255, 0.1);

  position: absolute;
  content: '';
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: linear-gradient(
      90deg,
      var(--start-color) 10%,
      rgba(0, 0, 0, 0) 10%
    ),
    linear-gradient(var(--start-color) 10%, rgba(0, 0, 0, 0) 10%);
  background-size: 20px 20px;
}

.make-height-with-screen(@min-height, @height-size) {
  @media screen and (min-device-height: @min-height) {
    .substance__wrapper {
      height: @height-size;
      width: 240rem;
    }
  }
}

.font--title {
  font-size: var(--inner-title-size, 16px);
}
.font--text {
  font-size: var(--inner-text-size, 16px);
}
.font--bigger {
  font-size: var(--inner-bigger-size, 16px);
}

.make-height-with-screen(1080px, 81rem);
.make-height-with-screen(1297px, 84.375rem);
.make-height-with-screen(1351px, 135rem);


@media screen and (min-device-width: 1922px) {
  :root {
    --inner-text-size--small: 16px;
    --inner-text-size: 20px;
    --inner-title-size: 36px;
    --inner-subtitle-size: 30px;
    --inner-bigger-size: 40px;
    --inner-padding: 20px;
  }
}
.row {
  display: flex;
  flex: 1 0 auto;
  max-width: 100%;
}

.nowrap {
  flex-wrap: nowrap;
}

.row--column {
  flex-direction: column;
}

.col {
  flex: 1;
}

.shrink {
  flex: 0 1 auto;
}

.justify-content-end {
  justify-content: flex-end;
}

.justify-content-center {
  justify-content: center;
}

.align-items-center {
  align-items: center;
}

.fill-height {
  height: 100%;
}

.light-cyan--text {
  color: var(--light-cyan);
}

.font-weight-800 {
  font-weight: 800;
}

.larger-font-size {
  font-size: 1vw;
}

.fade-opacity {
  &-enter-active,
  &-leave-active {
    transition: all 600ms ease;
  }

  &-enter,
  &-enter-active,
  &-leave,
  &-leave-active {
    opacity: 0;
  }

  &-enter-to,
  &-leave {
    opacity: 1;
  }
}
